<script setup lang="ts">
import { ref } from 'vue'
import { NDataTable } from 'naive-ui'
import { map, throttle, debounce } from 'lodash-es'
import { IosMore, IosArrowRoundUp, IosArrowRoundDown, MdTrash } from '@vicons/ionicons4'
import SkuCard from './skuCard.vue'
import { useProductStore } from '@/store/modules/product'
import { multipeConfig } from './config'
import { addGoodsSkusCard, updateGoodsSkusCard } from '@/service/api/product'
import { storeToRefs } from 'pinia'
import { useGetGoodsInfo } from './hooks'

const productStore = useProductStore()
const { specificationData } = storeToRefs(productStore)

const { goods_id } = defineProps<{
  goods_id: number
}>()

const skuCardList = defineModel<Api.Product.GoodsSkusListItem[]>('skuCardList', {
  required: true,
})
const goodsSkusCard = defineModel<Api.Product.GoodsSkuInfoCard[]>('goodsSkusCard', {
  required: true,
})

const visible = ref(false)

const handleAddOption = debounce(async () => {
  try {
    const { data } = await addGoodsSkusCard({
      goods_id: goods_id,
      name: '规格选项',
      type: 0,
      order: 50,
    })
    updateCard()
  } catch (error) {
    console.error(error)
  }
}, 2000)

const handleUpdateCardName = throttle(async (item: Api.Product.GoodsSkusCardItem) => {
  try {
    const { data } = await updateGoodsSkusCard({
      id: item.id,
      goods_id: goods_id,
      name: item.name,
      type: item.type,
      order: item.order,
    })
    updateCard()
  } catch (error) {
    console.error(error)
  }
}, 2000)

const updateCard = async () => {
  const res = await useGetGoodsInfo(goods_id)
  if (res) {
    goodsSkusCard.value = res.goodsSkusCardList
    console.log('goodsSkusCard', goodsSkusCard.value)
    console.log('specificationData', specificationData.value)
  }
}
</script>

<template>
  <NForm label-placement="left">
    <NFormItem label="规格选项">
      <div class="flex flex-col gap-3 flex-1">
        <NCard v-for="(item, index) in goodsSkusCard" size="small"
          content-class="bg-gray-100 flex items-center justify-between">
          <template #default>
            <NInputGroup class="border border-gray-200 rounded-md" style="width: 230px">
              <NInput v-model:value="item.name" placeholder="规格选项" style="width: 180px"
                @update:value="handleUpdateCardName(item)" />
              <NIcon :component="IosMore" class="text-gray-500 mt-1.8 pl-3.5 text-xl" @click="visible = true" />
            </NInputGroup>
            <NButtonGroup>
              <NButton>
                <NIcon :component="IosArrowRoundUp" class="text-xl" />
              </NButton>
              <NButton>
                <NIcon :component="IosArrowRoundDown" class="text-xl" />
              </NButton>
              <NButton>
                <NIcon :component="MdTrash" class="text-xl" />
              </NButton>
            </NButtonGroup>
          </template>
          <template #footer>
            <NDynamicTags :value="map(item.goodsSkusCardValue, 'value')" class="mt-3" />
            <SkuCard v-model:visible="visible" v-model:skuCardList="skuCardList" v-model:goodsSkusCard="goodsSkusCard"
              @updateGoodsSkusCard="updateCard" />
          </template>
        </NCard>
      </div>
    </NFormItem>
    <NButton type="primary" size="small" class="ml-17 mb-3 mt--8" @click="handleAddOption"> 添加规格选项 </NButton>
    <NFormItem label="规格设置">
      <NDataTable :data="specificationData.goodsSkus" :columns="multipeConfig(specificationData.goodsSkus)" />
    </NFormItem>
  </NForm>
</template>
